<template>
  <div id="insurance">
    <div class="header2">
      <div class="goback" @click="handleCancle"><i class="icon icon-left"></i></div>
      <div class="title">货物保险</div>
      <div class="actions" @click="cancelInsurance">取消投保</div>
    </div>
    <div class="flex vux-1px-t insurance-box">
      <div style="width: 2.35rem; height: 1.6rem;"><img src="../../static/img/insurance.png" style="display: block; width: 100%;height: 100%;"></div>
      <div class="flex-auto" style="padding: 0rem 0.2rem;">
        <div class="vux-1px-b" style="height: 0.95rem;line-height: 0.95rem">
          <x-button mini type="primary" class="out-line">中国财保</x-button>
        </div>
        <div style="height: 0.65rem;line-height: 0.65rem">
          <span style="color: #222;">为您的货物提供安全保障</span>
        </div>
      </div>
    </div>
    <div style="margin-top: 0.2rem;background: #fff;">
      <group title="" class="weui-cells_form">
        <div class="vux-x-input weui-cell weui-vcode">
          <div class="weui-cell__hd">
            <label class="weui-label" style="width: 5em;">保险金额</label>
          </div>
          <div class="weui-cell__bd weui-cell__primary">
            <input class="weui-input" @input="keyMoney" placeholder="填写货物价值金额" v-model="insurance.baoxian" />
          </div>
        </div>
      </group>
      <group id="baoe">
        <cell title="保费(元)" value-align="left">
          <span style="padding-left: 0.45rem" class="text-orange">{{ insurance.baoe }}</span>
        </cell>
      </group>
      <p style="text-align: center; font-size: 0.25rem; margin-top:0.25rem;" @click="showXy = true">
        <i class="icon icon-check text-orange" style="font-size: 0.3rem"></i>
        我已阅读及确认<span class="text-orange">《货物保险条例》</span>
      </p>
      <div class="subbtn" style="padding-bottom: 0.25rem;">
        <x-button type="primary" action-type="button" @click.native="handleSub">确认投保</x-button>
      </div>
    </div>
    <div class="noticemsg" style="padding: 0rem 0.2rem;">
      <p>温馨提示</p>
      <p>1、您在待取货运单里点击确认取货时保险生效</p>
      <p>2、超低保费，费率为万分之一点五（详情参照保险合同）</p>
    </div>
    <div v-transfer-dom>
      <popup v-model="showXy" position="bottom" style="height: 100%;background: #fff;">
        <div style="height: 1.2rem;line-height: 1.2rem; padding: 0rem 0.35rem; text-align: right">
          <i class="icon icon-close" style="font-size: 0.6rem;" @click="showXy = false"></i>
        </div>
        <xie-yi></xie-yi>
      </popup>
    </div>
  </div>
</template>
<script>
import { globalKeyUp } from '../libs/fn'
import { Cell, TransferDom } from 'vux'
import XieYi from './XieYi.vue'
export default{
  directives: {
    TransferDom
  },
  props: {
    serverType: {
      type: [String, Number],
      default: 2
    },
    insuranceData: [String, Number, Object, Array],
    type: [String, Number, Object, Array],
  },
  components: {
    Cell,
    XieYi
  },
  data() {
    return {
      showXy: false,
      insurance: {
        baoxian: '',
        baoe: ''
      },
      maxValue: 0,
      min_baofei: 0,
      fee: [],
      baoe: []
    }
  },
  computed: {
    globalServerID() {
      return this.$store.state.serverID
    }
  },
  watch: {
    globalServerID: function (val) {
      this.insurance = {
        baoxian: '',
        baoe: ''
      }
    }
  },
  created() {
    this.$http.post($config.host + '/api/Insurance/checkOrderInsurance', qs.stringify({
      uid: this.$store.state.userInfo.uid,
      client: $config.client_type,
      device: $config.device_type,
      token: this.$store.state.userInfo.token,
      city_to: this.serverType
    })).then(res => {
      const {code ,msg, data} = res.data
      if(code == 1 && data) {
        this.min_baofei = data.min_baofei
        this.maxValue = data.max_baoe
        this.fee = data.fee
        this.baoe = data.baoe || []
      }
    })

  },
  methods: {
    handleCancle() {
      this.$emit('on-cancle')
    },
    handleSub() {
      this.$emit('on-submit', this.insurance)
    },
    cancelInsurance() {
      this.insurance = {
        baoxian: '',
        baoe: ''
      }
      this.handleSub()
    },
    keyMoney(e) {
      this.insurance.baoxian = globalKeyUp(e.target)
      if(this.insurance.baoxian <= 0) {
        this.insurance.baoe = ''
        return
      }
      if(!this.insurance.baoe){
        this.insurance.baoe = this.min_baofei
      }

      if(this.insurance.baoxian > this.maxValue) {
        this.$vux.toast.text('最大保额' + this.maxValue + '元', 'middle')
        this.insurance.baoxian = this.maxValue
      }
      if(this.serverType == 2) {
        for (let i = 0; i < this.baoe.length; i++) {
          if(this.insurance.baoxian <= this.baoe[i]){
            const baoe = (this.fee[i] * this.insurance.baoxian).toFixed(2)
            this.insurance.baoe = baoe > this.min_baofei? baoe: this.min_baofei
            return
          }
        }
      }
    }
  }
}
</script>
<style scoped>
  .insurance-box{
    height: 1.6rem;
    background: #fff;
  }
  .out-line{
    background: #fff;
    border:1px solid #ff5722;
    color: #ff5722;
  }
</style>
